var v = document.getElementById('v'),
    c = document.getElementById('c'),
    ctx = c.getContext('2d'),
    frameAnimateId;

const cWidth = 640, cHeight = 360;
const segmentWidth = 640 / 3, segmentHeight = 360 / 3;
let clipSegmentWidth = 0, clipSegmentHeight = 0;
let startLeft = 0, startTop = 0;

const tweenSet = new Set();

v.addEventListener('loadeddata', handleVideoLoadeddata, false);
// v.addEventListener('timeupdate', handleTimeUpdate, false); //不能通过事件来触发绘制，因为帧率太低，大概一秒3到4帧

function handleVideoLoadeddata(e) {
    // for(var key in this) {
    //     console.log(key + '--' + (typeof this[key]));
    // }
    c.width = innerWidth;
    c.height = innerHeight;
    clipSegmentWidth = this.videoWidth / 3;
    clipSegmentHeight = this.videoHeight / 3;
    startLeft =  c.width / 2 - (cWidth / 2);
    startTop = c.height / 2 - (cHeight / 2);

    // drawVideoToCanvas();
}

let state = ''; // boom: 分散绘制， back 还原绘制
let target = [
    0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0
];
let origin = [];

function drawVideoToCanvas() {
    if(!v.ended) {
        for(let i = 0, j = 0; i < 9; i += 1, j += 2) {
            const col = i % 3;
            const row = (i / 3) >> 0;
            let segmentLeft = startLeft + (col * segmentWidth) + target[j];
            let segmentTop = startTop + (row * segmentHeight) + target[j + 1];
            // if (state === 'boom') {
            //     segmentLeft += target[j];
            //     segmentTop += target[j + 1]
            // }
            const clipLeft = col * clipSegmentWidth;
            const clipTop = row * clipSegmentHeight;
            ctx.drawImage(v, clipLeft, clipTop, clipSegmentWidth, clipSegmentHeight, segmentLeft, segmentTop, segmentWidth, segmentHeight);
        }
    } else {
        v.play();
    }
}

// 还原绘制
function reduction() {
    ctx.drawImage(v, startLeft, startTop, cWidth, cHeight);
}

// 分散绘制
function drawBoom () {

}

/**
 * 启动帧动画
 */
function startFrameAnimate () {
    frameAnimateId = requestAnimationFrame(startFrameAnimate);

    ctx.clearRect(0, 0, c.width, c.height);

    TWEEN.update();

    drawVideoToCanvas();
}

//控件事件绑定
document.getElementById('play').addEventListener('click', handlePlayClick, false);
document.getElementById('pause').addEventListener('click', handlePauseClick, false);
document.getElementById('boom').addEventListener('click', handleBoomClick, false);
document.getElementById('back').addEventListener('click', handleBackClick, false);

//播放按钮点击处理函数
function handlePlayClick(e) {
    if(v.paused) {
        v.play();
        if (!frameAnimateId) {
            startFrameAnimate();
        }
    }
}
//暂停按钮点击处理函数
function handlePauseClick(e) {
    if(!v.paused) {
        v.pause();
        // cancelAnimationFrame(frameAnimateId); //暂停帧动画
    }
}
// 分散按钮点击处理
function handleBoomClick() {
    if (state === 'boom') return;

    target = [];
    for(let i = 0; i < 18; i += 1) {
        target.push((Math.random() * 400 - 200))
    }
    new TWEEN.Tween([
        0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0
    ]).to(target, 1000)
    .easing(TWEEN.Easing.Quartic.Out)
    .onUpdate(function(arr) {
        target = arr;
    })
    .onComplete(() => {
        state = '';
        origin = target;
    })
    .start();

    state = 'boom';
}
// 还原按钮点击处理
function handleBackClick() {
    if (state === 'back') return;

    target = new Array(18).fill(0);
    new TWEEN.Tween(origin).to(target, 1000)
    .easing(TWEEN.Easing.Quartic.Out)
    .onUpdate(function(arr) {
        target = arr;
    })
    .onComplete(() => {
        state = '';
    })
    .start();

    state = 'back';
}